<template>
	<view  style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<!-- 固定图标的添加按键 -->
		<view  @click="xianshi()" v-if="addBi" style="position:fixed;top: 500rpx;z-index: 100; right: 30rpx;border-radius: 50%;background-color:blue;display: flex;justify-content: center;align-items: center;width: 100rpx;height: 100rpx;">
			<image style="width: 80rpx;height: 80rpx;" src="../../static/10.png" mode=""></image>
		</view>
		
		
		<!-- 搜索框 -->
		<view style="display:flex;width: 700rpx ;background-color:white;align-items: center;justify-content: center;margin: 10rpx auto;border-radius:40rpx;">
			<u-search bgColor="white" margin="0 30rpx 0 0" :placeholder="shu2"   actionText="搜索" v-model="soukey" @search="usersearch" @custom="usersearch" ></u-search>
		</view>
		
		<!-- 横线隔开 -->
		<view style="display: flex;width:750rpx;background-color: #DFDFDF;height: 3rpx;margin: 0 auto ;"></view>			
		<view style="width: 750rpx;height:90rpx;background-color: white;">
			<!-- 最上面的【校区】选择 -->
			<u-tabs  style="height:70rpx;" :current="current" :list="xiaoqu" 
				scroll-y="true" lineWidth="50" lineColor="blue"
				:activeStyle="{ color: 'black',  transform: 'scale(1)'}"
				:inactiveStyle="{color: '#606266',transform: 'scale(0.9)'}" @change="change">
			</u-tabs>
		</view>
		
		<!-- 教室的展示 -->
		<view   v-for="item in jiaoshilist"  :key=item._id :title="item.name" style="display: flex;flex-direction: row;padding: 0 20rpx; align-items: center;justify-content: space-around;" >
			<view @click="xiugaijiaoshi_show(item)" style="display: flex;border-radius: 20rpx; width: 90%;background-color: white;box-shadow: 1px 1px 5px #c2c2c2;margin: 20rpx 0 0 0;padding: 20rpx;justify-content: space-between;align-items: center;">
				<view style="display: flex;flex-direction: column;">
					<view >
						{{item.name}}
					</view>
					<view style="display: flex;flex-direction: row; color: #c2c2c2;font-size: 28rpx;">
						<view class="">
							{{item.guanlilaoshi}}
						</view>
						<view style="margin-left: 20rpx;">
							Tel：{{item.guanlilaoshidianhua.substring(0,3)}}****{{item.guanlilaoshidianhua.substring(item.guanlilaoshidianhua.length-4,item.guanlilaoshidianhua.length)}}
						</view>
					</view>
				</view>
				<view style="display: flex;color: #c2c2c2;font-size: 28rpx;" @click.stop="paike(item)">
					排课>>
				</view>
			</view>
		</view>
		
		
				
		
		<!-- 下面是添加新教室出现的弹窗 -->
		<model v-if='show3' @colseModel='show3 = false'>
				<view style="display: flex;background-color: blue;color: white;border-radius: 20rpx;padding: 15rpx ; margin: 25rpx auto;justify-content: center;">
					给【{{shu3}}】添加新教室！
				</view>
				<view style="display: flex;margin-top: 30rpx;">校区</view>
					<uni-easyinput disabled type="text" v-model="shu3" placeholder="请选择校区" />
				<view style="display: flex;margin-top: 30rpx;">输入新的教室名字</view>
				<uni-easyinput type="text" v-model="shu8" />
				<view style="display: flex;margin-bottom: 30rpx;">选择管理老师名字</view>
					<picker @change="jiaowulaoshixuanze" :range="jiaowulaoshi">
						<uni-easyinput type="text" v-model="shu4" disabled placeholder="请选择教务老师" suffixIcon="bottom"/>
					</picker>
				<view style="display: flex;margin-top: 30rpx;">管理老师电话</view>
				<uni-easyinput disabled type="text" v-model="shu5" />
				<view style="display: flex;width: 60%;justify-content: space-around;margin: 30rpx auto;color: white;">
					<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;" @click="show3 = false">取消</view>
					<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;" @click="addroom()">确定</view>
				</view>
		</model>
		
		<!-- 下面是编辑新教室出现的弹窗 -->
		<model v-if='show4' @colseModel='show4 = false'>
				<view style="display: flex;background-color:blue;color: white;border-radius: 20rpx;padding: 15rpx ; margin: 25rpx auto;justify-content: center;">
					给【{{shu3}}】修改教室信息！
				</view>
				<view style="display: flex;margin-bottom: 30rpx;">输入新的教室名字</view>
				<uni-easyinput type="text" v-model="room_1" />
				<view style="display: flex;margin-bottom: 30rpx;">管理老师名字</view>
				<uni-easyinput type="text" disabled v-model="room_2" />
				<view style="display: flex;margin-bottom: 30rpx;">管理老师电话</view>
				<uni-easyinput type="text" disabled v-model="room_3" />
				<view style="display: flex;width: 60%;justify-content: space-around;margin: 30rpx auto;color: white;">
					<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;" @click="show4 = false,addBi=1">取消</view>
					<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;" @click="xiugaijiaoshi()">确定</view>
				</view>
				<view v-if="meiyi_userinfo.permission.indexOf('del_jiaoshi')!=-1" @click="shanchujiaoshi(room)" style="display: flex;margin-top: 40rpx;justify-content: center;">
					删除本间教室！
				</view>
		</model>
		
		
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	import model from '../../components/model.vue'
	export default {
		components: {
			model
		},
		data() {
			return {
				addBi:1,
				soukey:'',//搜索框 关键词
				jiaoshilist:[],
				xiaoqu:[],//去重后的校区
				xiaoqu1:[],//没有去重后的校区
				jiaowulaoshi:[],
				meiyi_userinfo:[],//判断登陆人信息
				current:0,//UTAB的标签数字
				shu2:'请输入教室名称进行搜索',//搜索框中显示的内容
				shu3:'',//添加教室和课程时，承载校区名称
				shu4:'',//校区的管理老师,添加老师电话承载
				shu5:'',//老师的电话
				shu8:'',//添加校区和教室和课程时临时传值
				shu16:'',//添加教室时教务老师的ID
				shu16id:[],
				show3:false,//输入新教室名字，新添加时用
				show4:false,//输入新教室名字，更改时用
			}
		},
		async onLoad() {
			this.meiyi_userinfo=await uniCloud.getCurrentUserInfo()
			let meiyi_name_tel=await uni.getStorageSync('meiyi_name_tel')
			this.meiyi_name_tel=meiyi_name_tel
			this.jingshouren=meiyi_name_tel.name+meiyi_name_tel.mobile
			this.jiaowulaoshifun()//获取教务老师的数据
			this.xiaoqufun()
		},
		
		methods: {
			//搜索框分类提示和运行
			usersearch(){
				if(this.shu2=='请输入校区名称进行搜索'){
					this.xiaoqufun()
				}else if(this.shu2=='请输入教室名称进行搜索'){
					this.jiaoshilistfun()
				}else{
					this.kechengfun()
				}
			},
			
			// 获取我管理的校区
			async xiaoqufun(){
				this.xiaoqu1=await uni.getStorageSync('aoyashengxiaoqu')
				this.xiaoqu=[]
				let arr=[]
				for(var i=0;i<this.xiaoqu1.result.data.length;i++){
					var cou=0
					for(var j=i+1;j<this.xiaoqu1.result.data.length;j++){
						if(this.xiaoqu1.result.data[i].name==this.xiaoqu1.result.data[j].name){
							cou=9
							break
						}
					}
					if(cou==0){
						this.xiaoqu.push(this.xiaoqu1.result.data[i])
						arr.push(this.xiaoqu1.result.data[i].name)
					}
				}
				this.wodexiaoqu=arr
				if(this.xiaoqu.length>1){
					this.xiaoqu.unshift ({
						name:'全部'
					})
				}else{
					this.shu3=this.xiaoqu[0].name
				}
				this.shu1=this.wodexiaoqu
				uni.hideLoading()
				this.jiaoshilistfun()
			},
			
			//调取某个校区的教室
			jiaoshilistfun(){
				uni.showLoading({
					title: '教室信息获取…',
					mask: true
				});
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:23,//类型为7时，某个校区的教室
						weizhi:this.shu1,
						key:this.soukey
					}
				}).then(res=>{
					this.jiaoshilist=res.result.data
					uni.hideLoading()
				})
			},
			// 教务老师的数据库调取
			jiaowulaoshifun() {
				uni.showLoading({
					title: '老师信息获取…',
					mask: true
				});
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:10,//类型为7时，某个校区的教室
						role:'jiaowulaoshi'
					}
				}).then(res=>{
					res.result.data.map(item => {
						this.jiaowulaoshi.push(item.name+item.mobile)
						this.shu16id.push(item._id)
					})
					uni.hideLoading()
				})
				},
			
			//选择教务老师
			jiaowulaoshixuanze: function(e) {
				console.log('55',e);
				this.shu4 = this.jiaowulaoshi[e.detail.value].substring(0,this.jiaowulaoshi[e.detail.value].length-11)
				this.shu5=this.jiaowulaoshi[e.detail.value].substring(this.jiaowulaoshi[e.detail.value].length-11,this.jiaowulaoshi[e.detail.value].length)
				this.shu16=this.shu16id[e.detail.value]
			},
			
			// 进入排课的界面
			async paike(e){
				await uni.setStorageSync('aoyashengjiaoshi',e)
				uni.navigateTo({
						url: "/pages/jiaoshi4a/jiaoshi4a"
				})
			},
			// 修改教室，一、jiaoshi更新数据，二、xiugaishuju添加一条
			xiugaijiaoshi(){
				//名称没有更改时，不执行
				uni.showLoading({
					title: '教室修改…',
					mask: true
				});
				if(this.roomname==this.room_1){
					this.show4=false
					this.addBi=1
					uni.hideLoading()
					return
				}
				if(!this.room_1) {
					uni.showToast({
						title: '请输入校区名称！',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
					return
				}
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:7,//类型为7时，某个校区的教室
						id:this.room._id,
						name:this.room_1,
						detail:'修改教室数据，名称：【'+this.roomname+'】→【'+this.room_1+'】',
						riqi:getDateTime.dateTimeStr('y-m-d h:i:s'),
						jingshouren:this.jingshouren,
						xiaoqu:this.room.weizhi
					}
				}).then(res=>{
					uni.hideLoading()
					this.jiaoshilistfun()
					this.show4=false
					this.addBi=1
				})
			},
			// 修改教室时弹窗
			xiugaijiaoshi_show(e){
				this.room=e
				this.room_1=e.name
				this.roomname=e.name
				this.shu3=e.weizhi
				this.room_2=e.guanlilaoshi
				this.room_3=e.guanlilaoshidianhua
				this.show4=true
				this.addBi=0
				
			},
		
			// 删除教室
			shanchujiaoshi(item){
				uni.showModal({
					title: '重要提示，删除教室：'+item.name,
					content: '再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm){
							uni.showLoading({
								title: '删除中…',
								mask: true
							});
							uniCloud.callFunction({
								name:"funshare",
								data:{
									leixing:9,//类型为8时，删除指定教室
									_id:item._id,
									detail:'删除教室数据，名称：【'+item.name+'】，所在校区：【'+item.weizhi+'】',
									riqi:getDateTime.dateTimeStr('y-m-d h:i:s'),
									jingshouren:this.jingshouren,
									xiaoqu:item.weizhi
								}
							}).then(res=>{
								uni.hideLoading()
								this.show4=false
								this.addBi=1
								this.jiaoshilistfun()
								uni.showToast({
									title: '删除成功！',
									icon: 'none',
									duration: 1000
								})
							})
						}
						
					},
					fail: () => {},
					complete: () => {}
				});
			},
			
			// 添加新教室
			addroom(){
				uni.showLoading({
					title: '教室添加…',
					mask: true
				});
				if(!this.shu8) {
					uni.showToast({
						title: '请输入教室名称！',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
					return
				}
				if(!this.shu3) {
					uni.showToast({
						title: '无可选择校区，请联系管理员添加教务老师身份！',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
					return
				}
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:8,//类型为8时，某个校区添加教室
						name:this.shu8,
						guanlilaoshi:this.shu4,
						guanlilaoshidianhua:this.shu5,
						guanlilaoshiid:this.shu16,
						weizhi:this.shu3,
						detail:'添加教室，教室名称：【'+this.shu8+'】，所在校区：【'+this.shu3+'】，管理老师：【'+this.shu4+this.shu5+'】',
						riqi:getDateTime.dateTimeStr('y-m-d h:i:s'),
						jingshouren:this.jingshouren,
					}
				}).then(res=>{
					this.show3=false
					this.jiaoshilistfun()
					uni.showToast({
						title: '添加成功！',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
				})
				this.shu8=''
			},
			//教室管理中进行切换
			change(e){
				this.shu1=[]
				if(e.name=='全部'){
					this.shu1=this.wodexiaoqu
				}else{
					this.shu1.push(e.name)
				}
				this.shu3=e.name
				this.jiaoshilistfun()
			},
			// 下面是填加教室时显示的弹窗
			xianshi(){
				if(this.shu3=='全部' || this.shu3==''){
					uni.showToast({
						title: '请选择校区后再次尝试！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				//添加教室时出现弹窗
				if(this.xiaoqu.length>0){
					this.show3=true
					// this.shu4=this.meiyi_name_tel.name
					// this.shu5=this.meiyi_name_tel.mobile
				}else{
					uni.showToast({
						title: '没有管理的校区，请联系管理员添加校区！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				
			},
			
		}
	}
</script>

<style lang="scss">

page{
	background-color: #f8f8f8;
	.xuanzhong{
		display: flex;
		width:150rpx;
		padding: 9rpx 25rpx;
		justify-content: center;
		align-items: center;
		background-color:blue;
		border-radius: 15rpx;		
		color: white;
	}
	.weixuanzhong{
		display: flex;
		width:150rpx;
		padding: 9rpx 25rpx;
		justify-content: center;
		align-items: center;
		border-color: blue;
		border-width: 4rpx;
		border-style: solid;
		border-radius: 15rpx;
		color: blue;
	}
}
		
</style>
